<template>
  <!-- <div>
		<img class="sdde" :src="`${publicPath}imges/but_play.png`" />
		<pre name="code" class="brush: js; gutter: false;">
                function foo() {
                    var i = 3;
                }
         
        /**
            * SyntaxHighlighter
            */
            function foo() {
                if (counter >= 10)
                    return;
                // it works!
            }
         </pre
		>
        <button @click="handle">变化</button>
	</div> -->

  <div v-highlight>
    <pre>
            <code v-html="code">
            <!-- 高亮代码块 -->
             function foo() {
                    var i = 3;
                }
         
        /**
            * SyntaxHighlighter
            */
            function foo() {
                if (counter >= 10)
                    return;
                // it works!
            }
            {{code}}
            </code>
        </pre>
  </div>
</template>

<script>
import { syntaxhighlighter } from "./syntaxhighlighter.js";
import code from "./code";

export default {
  data() {
    return {
      publicPath: process.env.BASE_URL,
      syntaxhighlighter: syntaxhighlighter,
      code: this.HTMLEncode(code)
    };
  },
  methods: {
      HTMLDecode(text) {    
     var temp = document.createElement("div");    
     temp.innerHTML = text;    
     var output = temp.innerText;    
     temp = null;    
     return output; 
 },
 HTMLEncode(html) {    
    var temp = document.createElement ("div");    
    (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);   
    var output = temp.innerHTML;   
    temp = null;    
    return output; 
 },
    async handle() {
      await syntaxhighlighter();
      window.SyntaxHighlighter.all();
    },
  },
  // async mounted() {
  //     await syntaxhighlighter()
  //         window.SyntaxHighlighter.all()
  // },
  created() {
    // console.log('初始化')
  },
};
</script>

<style lang="less">
// @import '../../../../public/syntaxhighlighter/styles/shCore.css';
// @import '../../../../public/syntaxhighlighter/styles/shThemeRDark.css';
</style>